<template>
  <view class="body">
    <image
      class="sport-guide-bg"
      src="https://ainengli.meilianshuke.com/jkhx/common/sport-guide-bg.png"
      mode="scaleToFill"
    />

    <view class="sport-box">
      <view class="sport-item" v-for="(item, index) in sportItenList" :key="index">
        <view class="title">
          <view class="title-icon" />
          <text class="title-text">{{ item.title }}</text>
        </view>
        <view class="sport-item-content">
          <text class="content-text"> {{ item.content }}</text>
        </view>
      </view>
    </view>

    <view class="fixed">
      <button class="fix-btn" @tap="toQuestionnaire">会员专享</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import store, { auth } from '@/store'

const sportItenList = reactive([
  {
    title: '个性化运动计划',
    content:
      '根据用户的运动目标、身体状况和生活习惯，量身定制个性化的运动计划，让每一个训练计划更符合个人需求。'
  },
  {
    title: '视频示范与指导',
    content: '提供详细的动作示范视频，确保用户能够正确执行每个动作，减少受伤风险，提高训练效果。'
  },
  {
    title: '智能提醒与记录',
    content:
      '定期提醒运动，帮助用户养成好的运动习惯。智能记录用户的运动打卡记录，并计算每次运动的消耗热量。'
  }
])
const type = ref('')

onLoad((option) => {
  type.value = option && option.type ? option.type : ''
})

const toQuestionnaire = () => {
  // uni.navigateTo({ url: '/module/src/pages/sports/sportsQuestionnaire/feedback' })
  if (store.state.CLIENTTYPE == 'checkAfterMini') {
    uni.redirectTo({ url: '/packA/pages/buyMember/index?source=sourceIndex' })
  } else if (store.state.CLIENTTYPE == 'weightLoseMini') {
    uni.redirectTo({ url: '/packA/pages/weightManage/serverPackage' })
  }
}
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  height: 100%;
  overflow: auto;
  padding-bottom: calc(66rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(66rpx + env(safe-area-inset-bottom));

  .sport-guide-bg {
    width: 100%;
    height: 656rpx;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .sport-box {
    position: relative;
    // top: 362rpx;
    z-index: 2;
    padding: 362rpx 32rpx 32rpx;
  }

  .sport-item {
    padding: 32rpx;
    background-color: #fff;
    border-radius: 24rpx;
    margin-bottom: 32rpx;

    .title {
      height: 50rpx;
      margin-bottom: 24rpx;
      display: flex;
      flex-direction: row;
      align-items: center;

      .title-icon {
        width: 6rpx;
        height: 36rpx;
        background: #00d1b6;
        margin-right: 16rpx;
      }

      .title-text {
        font-weight: 600;
        font-size: 36rpx;
        color: #222222;
      }
    }

    .sport-item-content {
      background: #fafafa;
      border-radius: 16rpx;
      padding: 24rpx;

      .content-text {
        font-size: 28rpx;
        color: #222222;
        text-align: justify;
        word-break: break-all;
        line-height: 1.6;
      }
    }
  }
  .sport-item:last-child {
    margin-bottom: 64rpx;
  }

  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    // gap: 24rpx;
    justify-content: space-between;
    width: 100%;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background: #fff;

    .fix-btn {
      width: 100%;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      background: #00d1b6;
      border-radius: 44rpx;
    }
  }
}
</style>
